<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-graph-board/tf-graph-board.html">
<link rel="import" href="../tf-graph-loader/tf-graph-loader.html">
<link rel="import" href="../tf-graph/tf-graph-controls.html">
<!-- Stand alone element of tf-graph for embedding.

Example

<tf-graph-app pbtxt="[[pbtxt]]"></tf-graph-app>

-->

<dom-module id="tf-graph-app">
<template>
<style>

:host /deep/ {
  font-family: 'Roboto', sans-serif;
}

.main {
  position: absolute;
  right: 0;
  left: 250px;
  height: 100%;
}

.side {
  position: absolute;
  left: 0;
  width: 250px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.all {
  position: relative;
  width: 100%;
  height: 100%
}

</style>
<div class="all">
  <div class="side">
    <tf-graph-controls
        color-by-params="[[colorByParams]]"
        has-stats="[[hasStats]]"
        color-by="{{colorBy}}"
    ></tf-graph-controls>
    <tf-graph-loader id="loader"
        out-graph-hierarchy="{{graphHierarchy}}"
        out-graph="{{graph}}"
        out-graph-name="{{graphName}}"
        has-stats="{{hasStats}}"
        progress="{{_progress}}"
    ></tf-graph-loader>
  </div>
  <div class="main">
    <tf-graph-board id="graphboard"
        graph-hierarchy="[[graphHierarchy]]"
        graph="[[graph]]"
        has-stats="[[hasStats]]"
        graph-name="[[graphName]]"
        progress="[[_progress]]"
        color-by="[[colorBy]]"
        color-by-params="{{colorByParams}}"
    ></tf-graph-board>
  </div>
</div>
</template>
</dom-module>

<script>
(function(){

Polymer({
  is: 'tf-graph-app',
  properties: {
    hasStats: Boolean,
    pbtxt: {
      type: String,
      observer: '_updateGraph',
    },
    _progress: Object
  },
  _updateGraph: function() {
    var blob = new Blob([this.pbtxt]);
    this.$.loader._parseAndConstructHierarchicalGraph(null, blob);
  }
});
})();
</script>
